<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-dialog
      v-model="visible"
      title="编辑属性"
      :before-close="handleClose"
    >
      <div class="form-container">
        <el-form :model="form" ref="formRef"  label-width="200px" label-position="right">
          <el-form-item label="name" prop="form.name"
            :rules="[
              {
                required: true,
                message: '请设置name',
              }]"
          >
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="label" prop="form.label">
            <div class="labels" v-for="(item, index) in form.label" :key="index">
              <div>
                <el-input min style="margin-bottom: 10px; width: 60%;" v-model="form.label[index]" />
                <span class="right" @click="() => deleteLabel(index)"><el-icon><CircleCloseFilled /></el-icon></span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="数据类型">
            <el-select
              v-model="form.dataType"
              placeholder="请选择数据类型">
              <el-option
                v-for="(item, index) in dataPtions"
                :key="index"
                :value="item.val"
                :label="item.name"
              />
          </el-select>
          </el-form-item>
          <el-form-item label="是否提供可选项" >
            <el-select
              v-model="form.provideOptions"
              placeholder="请选择是否提供可选项">
              <el-option
                v-for="(item, index) in provideOptions"
                :key="index"
                :value="item.val"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="() => handle(0)">取消</el-button>
          <el-button type="primary" @click="() => handle(1)">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { dataPtions, provideOptions } from '@/plugins/config'

interface Props {
  dialogVisible: boolean;
  dialogData: any;
}

const props = defineProps<Props>()
const emit = defineEmits(['changeVisible', 'sendDataToParCom'])
const visible = computed(() => props?.dialogVisible)
const formRef = ref()
const form = ref({
  name: '',
  label: [],
  dataType: '',
  provideOptions: null
})
watch(() => props?.dialogData, (newVal: any) => {
  form.value = JSON.parse(JSON.stringify(newVal))
  console.log(newVal)
}, { immediate: true })
const handle = (type: number) => {
  if (!(+type)) {
    // 取消
    emit('changeVisible', false)
    return
  }
  emit('sendDataToParCom', form.value, () => {
    emit('changeVisible', false)
  })
  console.log(form.value)
}
const handleClose = () => {
  emit('changeVisible', false)
}
const deleteLabel = (index: number) => {
  if (form.value?.label?.length <= 1) {
    ElMessage.warning('至少保留1条label')
    return
  }
  form.value?.label?.splice(index, 1)
}
</script>

<style scoped lang="less">
.form-container {
  width: 100%;
  display: flex;
  justify-content: center;
  .el-form {
    width: 80%;
  }
}
.labels {
  display: block;
  width: 100%;
  & > div {
    display: flex;
    align-items: center;
  }
  .right {
    margin-left: 10px;
    margin-top: -10px;
    cursor: pointer;
  }
}
</style>
